<template>
  <!-- 添加或修改投标保函对话框 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" destroy-on-close  width="1360px" append-to-body>
    <el-form ref="form" :inline="true" :model="form" label-width="180px" disabled>
      <!-- 基本信息 -->
      <el-divider content-position="left">基本信息</el-divider>
      <div>
        <el-form-item label="是否补录" prop="isBulu">
          <div class="label_txt">{{ form.isBulu }}</div>
        </el-form-item>
        <el-form-item label="受益人名称" prop="syName">
          <div class="label_txt">{{ form.syName }}</div>
        </el-form-item>
        <el-form-item label="受益人类型" prop="syType">
          <div class="label_txt">{{ form.syType }}</div>
        </el-form-item>
      </div>

      <div>
        <el-form-item label="项目名称" prop="xmName">
          <div class="label_txt">{{ form.xmName }}</div>
        </el-form-item>
        <el-form-item label="项目所在省市" prop="xmShengAndShi">
          <div class="label_txt">{{ form.xmSheng + '/' + form.xmShi }}</div>
        </el-form-item>
        <el-form-item label="项目所在地" prop="xmAddress">
          <div class="label_txt">{{ form.xmAddress }}</div>
        </el-form-item>
        <el-form-item label="项目类型" prop="xmType">
          <div class="label_txt">{{ form.xmType }}</div>
        </el-form-item>
        <el-form-item label="是否特殊项目" prop="xmSpecial">
          <div class="label_txt">{{ form.xmSpecial }}</div>
        </el-form-item>
        <el-form-item label="开标时间" prop="xmKbdate">
          <div class="label_txt">{{ form.xmKbdate }}</div>
        </el-form-item>
        <el-form-item label="投标有效期" prop="xmValidity">
          <div class="label_txt">{{ form.xmValidity }}</div>
        </el-form-item>
      </div>


      <div>
        <el-form-item label="项目的上传文件" prop="xmFileUrl">
          <file-upload v-model="form.xmFileUrl" />
        </el-form-item>
      </div>

      <!-- 企业信息 -->
      <template v-for="(item, index) in form.companyArr">
        <el-divider class="b_divider_tit" content-position="left">
          <span class="divider_tit">企业信息</span>
        </el-divider>
        <!-- 基本信息 -->
        <el-divider class="s_divider_tit" content-position="left">基本信息</el-divider>
        <div class="bd_box">
          <el-form-item v-for="(ite, i) in item.xmNameLots" :key="i" label="标段"
            :prop="'companyArr.' + index + '.xmNameLots.' + i">
            <div class="label_txt">{{ ite }}</div>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="企业名称" :prop="'companyArr.' + index + '.name'">
            <div class="label_txt">{{ item.name }}</div>
          </el-form-item>
          <el-form-item label="企业所在省市" :prop="'companyArr.' + index + '.qyShengAndShi'">
            <div class="label_txt">{{ item.sheng + '/' + item.shi }}</div>
          </el-form-item>
          <el-form-item label="企业地址" :prop="'companyArr.' + index + '.address'">
            <div class="label_txt">{{ item.address }}</div>
          </el-form-item>
          <el-form-item label="发票类型" :prop="'companyArr.' + index + '.fpType'">
            <div class="label_txt">{{ item.fpType }}</div>
          </el-form-item>
          <el-form-item label="发票名称" :prop="'companyArr.' + index + '.kpName'">
            <div class="label_txt">{{ item.kpName }}</div>
          </el-form-item>
          <el-form-item label="发票税号" :prop="'companyArr.' + index + '.kpNum'">
            <div class="label_txt">{{ item.kpNum }}</div>
          </el-form-item>
          <el-form-item label="发票电话" :prop="'companyArr.' + index + '.kpPhone'">
            <div class="label_txt">{{ item.kpPhone }}</div>
          </el-form-item>
          <el-form-item label="发票地址" :prop="'companyArr.' + index + '.kpAddress'">
            <div class="label_txt">{{ item.kpAddress }}</div>
          </el-form-item>
          <el-form-item label="发票开户行" :prop="'companyArr.' + index + '.kpBank'">
            <div class="label_txt">{{ item.kpBank }}</div>
          </el-form-item>
          <el-form-item label="发票开户账号" :prop="'companyArr.' + index + '.kpBankNum'">
            <div class="label_txt">{{ item.kpBankNum }}</div>
          </el-form-item>
          <el-form-item label="是否包邮" :prop="'companyArr.' + index + '.freeMail'">
            <div class="label_txt">{{ item.freeMail == '1' ? '是' : '否' }}</div>
          </el-form-item>
          <el-form-item label="邮寄地址" :prop="'companyArr.' + index + '.mailAdress'">
            <div class="label_txt">{{ item.mailAdress }}</div>
          </el-form-item>
          <el-form-item label="营业执照" :prop="'companyArr.' + index + '.yyzzUrl'">
            <file-upload v-model="item.yyzzUrl" />
          </el-form-item>
        </div>

        <!-- 保函信息 -->
        <el-divider class="s_divider_tit" content-position="left">保函信息</el-divider>
        <div>
          <el-form-item label="出函类型" :prop="'companyArr.' + index + '.bhType'">
            <div class="label_txt">{{ item.bhType }}</div>
          </el-form-item>
          <el-form-item label="出函机构及对接人" :prop="'companyArr.' + index + '.bhJigou'">
            <div class="label_txt">{{ getBLetterObj(item.bhJigou)?getBLetterObj(item.bhJigou).institution:'' }} ({{getBLetterObj(item.bhJigou)?getBLetterObj(item.bhJigou).name:'' }})</div>
          </el-form-item>
          <el-form-item label="保函金额" :prop="'companyArr.' + index + '.bhMoney'">
            <div class="label_txt">{{ item.bhMoney }}</div>
          </el-form-item>
          <el-form-item label="保函有效期" :prop="'companyArr.' + index + '.bhValidity'">
            <div class="label_txt">{{ item.bhValidity }}</div>
          </el-form-item>
          <el-form-item label="特殊要求" :prop="'companyArr.' + index + '.bhNotes'">
            <div class="label_txt">{{ item.bhNotes }}</div>
          </el-form-item>
          <el-form-item label="保函格式" :prop="'companyArr.' + index + '.bhFormat'">
            <div class="label_txt">{{ item.bhFormat }}</div>
          </el-form-item>

          <el-form-item label="保函文件" :prop="'companyArr.' + index + '.fkUrl'">
            <file-upload class="disable_upload" v-model="item.bhUrl" />
          </el-form-item>
        </div>

        <!-- 费用信息 -->
        <el-divider class="s_divider_tit" content-position="left">费用信息</el-divider>
        <div>
          <el-form-item label="收费" :prop="'companyArr.' + index + '.fkMoney'">
            <div class="label_txt">{{ item.fkMoney }}</div>
          </el-form-item>
          <el-form-item label="有无合作方费用" :prop="'companyArr.' + index + '.fkHzShifou'">
            <div class="label_txt">{{ item.fkHzShifou }}</div>
          </el-form-item>
          <el-form-item v-if="item.fkHzShow" label="合作方费用" :prop="'companyArr.' + index + '.fkHzMoney'">
            <div class="label_txt">{{ item.fkHzMoney }}</div>
          </el-form-item>
          <el-form-item v-if="item.fkHzShow" label="合作方付款" :prop="'companyArr.' + index + '.fkHzUrl'">
            <div class="label_txt">{{ item.fkHzUrl }}</div>
          </el-form-item>
          <el-form-item label="公司收益" :prop="'companyArr.' + index + '.fkShouyi'">
            <div class="label_txt">{{ item.fkShouyi }}</div>
          </el-form-item>
          <el-form-item label="返润扣税" :prop="'companyArr.' + index + '.fkFanrun'">
            <div class="label_txt">{{ item.fkFanrun }}</div>
          </el-form-item>
          <el-form-item label="业绩" :prop="'companyArr.' + index + '.yeji'">
            <div class="label_txt">{{ item.yeji }}</div>
          </el-form-item>
          <el-form-item label="付款方式" :prop="'companyArr.' + index + '.fkType'">
            <div class="label_txt">{{ item.fkType }}</div>
          </el-form-item>
          <el-form-item label="付款凭证" :prop="'companyArr.' + index + '.fkUrl'">
            <file-upload v-model="item.fkUrl" />
          </el-form-item>
        </div>
      </template>

      <!-- 运营 -->
      <el-divider content-position="left">运营</el-divider>

      <el-form-item label="受理意见" prop="acceptanceOpinion">
        <div class="label_txt">{{ form.acceptanceOpinion }}</div>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <div class="label_txt">{{ form.price }}</div>
      </el-form-item>
      <el-form-item label="特殊备注" prop="specialRemark">
        <div class="label_txt">{{ form.specialRemark }}</div>
      </el-form-item>
      <el-form-item label="资料包是否合格" prop="contractHg">
        <div class="label_txt">{{ form.contractHg }}</div>
      </el-form-item>
      <el-form-item label="补充文件描述" prop="supplyRemark">
        <div class="label_txt">{{ form.supplyRemark }}</div>
      </el-form-item>
      <el-form-item label="总费用" prop="totalMoney">
        <div class="label_txt">{{ form.totalMoney }}</div>
      </el-form-item>
      <el-form-item label="银行成本" prop="bankMoney">
        <div class="label_txt">{{ form.bankMoney }}</div>
      </el-form-item>
      <el-form-item label="银行账户" prop="bankAccount">
        <div class="label_txt">{{ form.bankAccount }}</div>
      </el-form-item>
      <el-form-item label="是否收到" prop="bankSf">
        <div class="label_txt">{{ form.bankSf }}</div>
      </el-form-item>
      <el-form-item label="银行成本2" prop="bankMoney2">
        <div class="label_txt">{{ form.bankMoney2 }}</div>
      </el-form-item>
      <el-form-item label="银行账户2" prop="bankAccount2">
        <div class="label_txt">{{ form.bankAccount2 }}</div>
      </el-form-item>
      <el-form-item label="是否收到2" prop="bankSf2">
        <div class="label_txt">{{ form.bankSf2 }}</div>
      </el-form-item>
      <el-form-item label="返润" prop="fanMoney">
        <div class="label_txt">{{ form.fanMoney }}</div>
      </el-form-item>
      <el-form-item label="扣税" prop="taxMoney">
        <div class="label_txt">{{ form.taxMoney }}</div>
      </el-form-item>
      <el-form-item label="业绩" prop="yeji">
        <div class="label_txt">{{ form.yeji }}</div>
      </el-form-item>
      <el-form-item label="是否开票" prop="sfKp">
        <div class="label_txt">{{ form.sfKp }}</div>
      </el-form-item>
      <el-form-item label="出函日期" prop="bhDate">
        <div class="label_txt">{{ form.bhDate }}</div>
      </el-form-item>
      <el-form-item label="邮寄单号" prop="mailNum">
        <div class="label_txt">{{ form.mailNum }}</div>
      </el-form-item>
      <el-form-item label="补充资料" prop="supplyUrl">
        <file-upload v-model="form.supplyUrl" />
      </el-form-item>
      <el-form-item label="签约资料包" prop="contractData">
        <file-upload v-model="form.contractData" />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { pcTextArr } from "element-china-area-data";
import {getBLetterList} from "@/api/guarantee/letter";
export default {
  name: "BiddingDetail",
  props: {
    title: {
      type: String,
      default: '详情'
    },
    detailOpen: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      required: true
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.detailOpen;
      },
      set(val) {
        this.$emit('changeDialog', val)
      }
    }
  },
  data() {
    return {
      // 省市数据
      areaData: pcTextArr,
      bLetters:[]
    };
  },
  watch: {
    form: {
      handler: function(newVal, oldVal) {
        this.getBLetters();
      },
      deep: true
    }
  },
  methods: {
    getBLetters(){
      getBLetterList().then(response => {
        this.bLetters = response.data;
      });
    },
    getBLetterObj(id){
      if(id && this.bLetters.length>0){
        return  this.bLetters.filter(item => item.id == id)[0]
      }else{
        return ''
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.my_select {
  width: 204px;
}

.my_picker {
  width: 204px;
}

.lotInput {
  width: 150px;
  margin-right: 10px;
}

.bd_box {
  display: flex;
  flex-wrap: wrap;
}

.divider_tit {
  margin-right: 10px;
}

.b_divider_tit {
  margin-bottom: 50px;
}

.s_divider_tit {
  width: 94%;
  margin: 24px 20px;
}

::v-deep .el-upload--picture-card,
::v-deep .upload-file-uploader,
::v-deep .ele-upload-list__item-content-action {
  display: none
}

.label_txt {
  width: 204px
}
</style>
